<template>
  <div>
    <b-card no-body class="overflow-hidden p-2 m-3">
      <b-row no-gutters>
        <b-col sm="3">
          <b-img :src="detial.cover" fluid alt="Responsive image"></b-img>
        </b-col>
        <b-col sm="9" class="pl-1">
          <div>
            <a
              :href="`/detail/${parent.Pid}/${detial.id}?id=${pid}&page=1&pagsize=10`"
              ><h4>{{ detial.title }}</h4></a
            >
            <p
              class="text-ellipsisl2 initp"
              style="margin: 0"
              v-html="formdata(detial.content)"
            ></p>
          </div>
        </b-col>
      </b-row>
    </b-card>
  </div>
</template>

<script>
export default {
  props: ['detial', 'parent', 'pid'],

  methods: {
    formdata(str) {
      // let regex = /<strong>.*?<\/strong>/g;
      let regex = /<\/?[^>]+>/g

      return str.replace(regex, '')
    },
  },
}
</script>

<style scoped>
.text-ellipsisl2 {
  overflow: hidden;
  text-overflow: ellipsis;

  /*弹性伸缩盒子模型显示*/
  display: -webkit-box;

  /*限制在一个块元素显示的文本的行数*/
  -webkit-line-clamp: 4;

  /*设置或检索伸缩盒对象的子元素的排列方式*/
  -webkit-box-orient: vertical;
}
.initp {
  font-size: 14px;
  color: #ccc;
}
</style>
